<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML学习</title>
</head>
<body>
    <header>body头标签</header>
    <ol>
        <li>有序列表</li>
    </ol>
    <ul>
        <li></li>
    </ul>
<!--    target属性指定打开资源的方式：_self在当前页面打开;_blank:在空白页面打开-->
    <a href="" target="_blank">超链接</a>
    <span>在一行展示，行内标签，不会换行</span>
    <div>没有任何的样式，每一个div沾满一整行，属于块级标签</div>

    <footer>body尾标签<</footer>
    <table border="1" align="center">
<!--        table中可以划分为thead、tbody、tfoot-->
            <caption>表格的标题：学生信息表</caption>
        <tr>
<!--            占两行-->
            <th rowspan="2">表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
<!--        占两列-->
        <tr>
            <td>内容</td>
            <td colspan="2">内容</td>
        </tr>
    </table>
    <!--    定义表单。可以定义一个范围，在他定义的范围中可以采集用户数据，出了范围不能采集 -->
    <!--action提交数据 method:提交方式post和get
        post:
            1.请求参数不会再地址栏中显示。会封装在请求体中。
            2.请求参数的长度是没有限制的
            3.较为安全
        get:
            1.请求的参数会在地址栏中显示。会封装到请求行中
            2.请求参数的长度是有限制的。
            3.不安全
       表单项中的数据要想要被提交，必须指定其name属性
    -->
    <form action="#" method="get">
<!--label:指定输入项的文字描述信息
    --注意：label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
  -->
        <label for="username">账号:</label><input type="text" name="username" placeholder="请输入账号" id="username"/><br><!--placeholder="请输入账号"提示信息-->
        <label for="password">密码:</label><input type="password" name="password" placeholder="请输入密码" id="password"/><br>
        性别：<input type="radio" name="sex" value="male" checked="checked">男<!--checked="checked"默认选中-->
            <input type="radio" name="sex" value="female">女<br>
        爱好：
        <input type="checkbox" name="basketball">篮球
        <input type="checkbox" name="football">足球
        <input type="checkbox" name="PingPong">乒乓球<br>
        图片文件选择：
        <input type="file" name="file"><br>
        隐藏域：
        <input type="hidden" name="hidden" value="chai"><br>
        拾色器：
        <input type="color" name="color"><br>
        生日：
        <input type="date" name="birthday"><br>
        带有时间的生日：
        <input type="datetime-local" name="birthday"><br>
        邮箱：<!--可以进行初步的验证符合邮箱格式-->
        <input type="email" name="email"><br>
        年龄：<!--这是个数字输入框-->
        <input type="number" name="age"><br>
<!--        下拉列表-->
        省份：
        <select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option><!--在提交的时候不支持中文，最好使用value="1"，进行赋值-->
            <option value="2" selected="selected">山东</option><!--selected="selected"被默认选中-->
        </select><br>
        自我描述：
        <textarea name="textarea" cols="6" rows="6"></textarea><br><!--这里显示的是5行6列-->


<!--        图片提交按钮-->
        <input type="image" src="#" alt="图片提交按钮"><br>
        <input type="submit" value="登录"><br>

    </form>
</body>
</html>